<template>
  <div class="bg-white border border-gray-200 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow">
    <img :src="avatar" alt="团队成员照片" class="w-full h-48 object-cover">
    <div class="p-4">
      <h3 class="font-semibold text-lg mb-1">{{ name }}</h3>
      <p class="text-blue-600 text-sm mb-2">{{ role }}</p>
      <p class="text-gray-600 text-sm">{{ description }}</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    name: String,
    role: String,
    avatar: String,
    description: String
  }
}
</script>